<template>
  <div class="home">
    <van-nav-bar
      title="交通卡口列表"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div class="content" v-for="(item,index) in result" :key="index" validate-first >
      <!-- 通过 pattern 进行正则校验 -->
      <van-field input-align="right"
        label="姓名"
        readonly
        v-model="item.name"
        name="pattern"
      />
      <van-field input-align="right"
        label="性别"
        readonly
        v-model="item.sex"
        name="pattern"
      />
      <van-field input-align="right"
        label="证件类型"
        readonly
        v-model="item.card_type"
        name="pattern"
      />
      <van-field input-align="right"
        label="证件号"
        readonly
        v-model="item.card_no"
        name="pattern"
      />
      <van-field input-align="right"
        label="出生日期"
        readonly
        v-model="item.bithday"
        name="pattern"
      />
      <van-field input-align="right"
        label="户口所在地"
        readonly
        v-model="item.registered_residence"
        name="pattern"
      />
      <van-field input-align="right"
        label="联系方式"
        readonly
        v-model="item.mobile"
        name="phoneRules"
      />
       <van-field input-align="right"
        label="目的地"
        readonly
        v-model="item.end_addr"
        name="pattern"
      />
      <van-field input-align="right"
        label="车牌"
        v-model="item.car_no"
        name="pattern"
      />

      <van-field input-align="right"
        label="上车省市区"
        v-model="item.start_addr"
        name="pattern"
      />
      <van-field input-align="right"
        label="到达收费口"
        v-model="item.charge_barrier"
        name="pattern"
      />
      <van-field input-align="right" name="radio" label="是否进口冷链">
        <template #input>
          <van-radio-group v-model="item.is_import_cold_chain" direction="horizontal">
            <van-radio name="1">是</van-radio>
            <van-radio name="2">否</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field input-align="right" name="radio" label="途径重点关注地区">
        <template #input>
          <van-radio-group v-model="item.avenue_flow_area" direction="horizontal">
            <van-radio name="1">是</van-radio>
            <van-radio name="2">否</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field input-align="right" name="radio" label="48小时核酸证明">
        <template #input>
          <van-radio-group v-model="item.nucleic_acid" direction="horizontal">
            <van-radio name="1">是</van-radio>
            <van-radio name="2">否</van-radio>
          </van-radio-group>
        </template>
      </van-field>
    </div>
  </div>
</template>

<script>
import { queryTraffic } from '@/api/gov/home'
export default {
  data () {
    return {
      result: []
    }
  },
  mounted () {
    queryTraffic({ pageNo: 1, pageSize: 20 }).then(res => {
      console.log(res.data.data.results)
      res.data.data.results.forEach(item => {
        item.avenue_flow_area === '是' ? item.avenue_flow_area = '1' : item.avenue_flow_area = '2'
        item.is_import_cold_chain === '是' ? item.is_import_cold_chain = '1' : item.is_import_cold_chain = '2'
        item.nucleic_acid === '否' ? item.nucleic_acid = '2' : item.nucleic_acid = '1'
      })
      this.result = res.data.data.results
    })
  }

}
</script>
<style lang="less" scoped>
.home {
  img{
    width: 100%;
  }
  .dialog-container{
    height: 70vh;
    overflow-y: auto;
  }
  .get-area{
    width: 100%;
    padding: 0 0.8rem;
    font-size: 0.747rem;
    color: #fff;
    background-color: #1989fa;
    border: 0.053rem solid #1989fa;
    height: 2.347rem;
    line-height: 2.347rem;
    text-align: center;
    border-radius: 0.107rem;
    cursor: pointer;
    box-sizing: border-box;
    margin-right: 10px;
  }
  /deep/.van-field__label{
    width: 8em;
  }
  /deep/.van-field__error-message{
    text-align: right;
  }
  .title{
    // font-size: 28px;
    text-indent: 20px;
    padding: 50px 0 20px;
  }
  .container{
    width: 90%;
    height: 80vh;
    overflow-y: auto;
    border: 1px solid #adadad;
    margin: auto;
    .item{
      margin: 10px;
    }
  }
}
.up-and-down{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f1f3f4;
  height: 80px;
  color: #333;
}
.content{
  border-bottom: 10px solid #ccc;
}
</style>
